<style lang="less">
    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
</style>


<template>
<div v-if="status!='success'" full text-center sz1>
    <Spin v-if="status=='loading'" fix gray3>
        <Icon type="ios-loading" size=24 class="demo-spin-icon-load"></Icon>
        <div>加载中</div>
    </Spin>
    <div v-if="status=='nodata'" style="height:100%;display:flex;align-items:center;justify-content:center" gray3>
        <div>
            <p>
                <img src="../../images/no-data.png">
            </p>
            <p mgt2>暂无相关数据</p>
        </div>
    </div>
</div>
</template>

<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../../lib/abpbase'

@Component
export default class CustomSpin extends AbpBase{
    @Prop({type:String, default:'success'}) status:String;
}
</script>

<style>

</style>
